<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<shopro-empty
			v-if="!hasTemplate"
			:image="$IMAGE_URL + '/template_empty.png'"
			tipText="暂未找到模板，请前往装修~"
		></shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 轮播图、搜索 -->
			<home-head
				v-if="banner && banner.length"
				:list="banner"
				:scrollTop="scrollTop"
			></home-head>
			<!-- 自定义模块 -->
			<view class="template-box">
					<view >
						<!-- 滑动菜单宫格 -->
						<!-- <sh-grid-swiper
							:list="menuGrid"
							oneRowNum="3"
						></sh-grid-swiper> -->
						<view class="home-type" >
						    <view class="type" v-for="(item,index) in menuGrid" @click="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">
						      <view class="type-img">
						        <image mode="aspectFit" style="width:90rpx;height:90rpx;" :src="item.imgUrl" />
						      </view>
						      <view class="type-title theme-text">
						        <text class="type-title_text">{{item.title}}</text>
						      </view>
						    </view>
						</view>
						
						<!-- 严选二手 -->
						<sh-hot-rent-list
							:detailList="detailList"
						></sh-hot-rent-list>
						
						<!-- 广告魔方 -->
						<!-- <sh-adv :advList="active" :advType="3"></sh-adv> -->
					
						<!-- 专区 -->
						<sh-zone
							:detailList="detailList"
						></sh-zone>
						<!-- 为你推荐标题 -->
						<!-- <sh-title-card
							title="为你推荐"
							bgImage="https://file.shopro.top/imgs/title2.png"
							titleColor="#000000"
						></sh-title-card> -->
						<!-- 为你推荐商品 -->
						<!-- <sh-hot-goods
							:detail="goodsList"
						></sh-hot-goods> -->
						<text style="padding-left: 20rpx; font-size: 40rpx;"> 热销商品</text>
						<view class="my-product">
						    <view class="my-product-item" v-for="item in goodsList.prudects" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">
						       <view class="product-img">
						            <image mode="aspectFit" style="width:100%;height:100%;" :src="item.imgUrl"/>
						       </view>
						       <view class="content-title ">
						            <text  number-of-lines="2" class="deList_min_tit_text">
									<view v-if="item.market" class="deList_min_tit_img">
									  <view class="deList_min_tit_img_text">{{item.market}}</view>
									</view>
									{{item.title}}
									</text>
						       </view>
						       <view class="product-price">
						            <text>￥{{item.price}}</text>
						       </view>
						    </view>
						</view>
					</view>
					
					
				
			</view>

			<!-- 分类选项卡 -->
		<!-- 	<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable"
				:styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr" 
			></sh-category-tabs> -->
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 悬浮按钮 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 广告 福利弹框如优惠券等 -->
			<!-- <shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal> -->
			<!-- 隐私协议 -->
			<!-- #ifdef APP-ANDROID -->
			<!-- <privacy-modal v-model="showPrivacy"></privacy-modal> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shTitleCard from './components/sh-title-card.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';
import shHotRentList from './components/sh-hot-rent-list.vue';
import shZone from './components/sh-zone';

import privacyModal from './index/privacy-modal.vue';
import homeHead from './index/home-head.vue';

// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
		shBanner,
		shGridSwiper,
		shGroupon,
		shHotGoods,
		shAdv,
		shCoupon,
		shSeckill,
		shRichtext,
		shTitleCard,
		shSearch,
		shCategoryTabs,
		shHotRentList,
		privacyModal,
		homeHead,
		shZone,

		// #ifdef MP-WEIXIN
		shLive
		// #endif
	},
	data() {
		return {
			// #ifdef MP-WEIXIN
			HAS_LIVE: HAS_LIVE,
			// #endif
			isRefresh: true,

			enable: false, //是否开启吸顶。
			isConnected: true, //是否有网
			showPrivacy: false, //协议
			scrollTop: 0,
			homeTemplate1:[
    {
        "id":54389,
        "type":"banner",
        "category":"home",
        "name":"轮播图",
        "content":{
            "name":"",
            "style":1,
            "height":530,
            "radius":0,
            "x":0,
            "y":0,
            "list":[
				{
				    "image":"https://img2.baidu.com/it/u=3639397151,2730868409&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500",
				    "path":"",
				    "path_type":1,
				    "name":"",
				    "bgcolor":"#9c100f",
				    "path_name":""
				},
				{
				    "image":"https://img0.baidu.com/it/u=100132955,1839445364&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=300",
				    "path":"",
				    "path_type":1,
				    "name":"",
				    "bgcolor":"#aaeeb2",
				    "path_name":""
				}
                // {
                //     "image":"https://demo.shopro.top/uploads/20230107/6b21f96cca4abbdc39a414c201f47ce0.jpg",
                //     "path":"",
                //     "path_type":1,
                //     "name":"",
                //     "bgcolor":"#9c100f",
                //     "path_name":""
                // },
                // {
                //     "image":"https://demo.shopro.top/uploads/20230106/0de9205044bda74aee566db96daec981.png",
                //     "path":"",
                //     "path_type":1,
                //     "name":"",
                //     "bgcolor":"#aaeeb2",
                //     "path_name":""
                // }
            ]
        },
        "decorate_id":1
    },
    {
        "id":54390,
        "type":"banner",
        "category":"home",
        "name":"广告通知",
        "content":{
            "name":"",
            "style":1,
            "height":187,
            "radius":0,
            "x":0,
            "y":0,
            "list":[
                {
                    "name":"",
                    "bgcolor":"#fa6c2c",
                    "image":"https://demo.shopro.top/uploads/20230107/4322c0d3af68cff3a1046767de847c69.png",
                    "path":"",
                    "path_name":"",
                    "path_type":1
                }
            ]
        },
        "decorate_id":1
    },
    {
        "id":54391,
        "type":"menu",
        "category":"home",
        "name":"菜单组",
        "content":{
            "name":"",
            "style":3,
            "list":[
     //            {
     //                "name":"精品手机",
     //                "image":"http://file.shopro.top/uploads/20210518/884360099a48d435e23e24091fb7084f.png",
     //                "path":"/pages/index/category",
     //                "path_name":"签到中心",
     //                "path_type":1
     //            },
     //            {
     //                "name":"笔记本",
     //                "image":"http://file.shopro.top/uploads/20210518/ce173c7d81d9521350620e51b0166808.png",
     //                "path":"/pages/activity/groupon/list",
     //                "path_name":"今日必拼",
     //                "path_type":1
     //            },
     //            {
     //                "name":"全新平板",
     //                "image":"http://file.shopro.top/uploads/20210518/cdc081320a7676753af09dbfad64b0f5.png",
     //                "path":"/pages/activity/seckill/list",
     //                "path_name":"限时秒杀",
     //                "path_type":1
     //            },
     //            {
     //                "name":"智能影音",
     //                "image":"http://file.shopro.top/uploads/20210518/c7b17849d22f345b4886d9a7dc6ef72a.png",
     //                "path":"/pages/app/coupon/list",
     //                "path_name":"优惠券中心",
     //                "path_type":1
     //            },
               
     //            {
					// "name":"家用智能",
     //                "image":"http://file.shopro.top/uploads/20210518/755895207ed20ab11c141f5f2cf4946e.png",
     //                "path":"/pages/goods/list?id=69",
     //                "path_name":"商品列表-数码家电",
     //                "path_type":1
     //            }
              {
                  "title":"精品手机",
                  "imgUrl":"https://hexinzj.oss-cn-hangzhou.aliyuncs.com/upload/20220922/d3b7ec5ad65443f3a7cf27a69bc60c1f.png",
                  "router":"/pages/index/category",
                  "path_name":"签到中心",
              },
              {
                  "title":"笔记本",
                  "imgUrl":"https://hexinzj.oss-cn-hangzhou.aliyuncs.com/upload/20230606/26b825dc8d3c41fc9836e14e07ae08a8.png",
                  "router":"/pages/index/category",
                  "path_name":"今日必拼",
              },
              {
                  "title":"全新平板",
                  "imgUrl":"https://hexinzj.oss-cn-hangzhou.aliyuncs.com/upload/20230606/01c3c96ddbcf4cfd9e2dd3d24abe02f9.png",
                  "router":"/pages/index/category",
                  "path_name":"限时秒杀",
              },
              {
                  "title":"智能影音",
                  "imgUrl":"https://hexinzj.oss-cn-hangzhou.aliyuncs.com/upload/20230606/5faa9fd039eb4bbbba5597ef8157e998.png",
                  "router":"/pages/index/category",
                  "path_name":"优惠券中心",
              },
                             
              {
              	"title":"家用智能",
                  "imgUrl":"https://hexinzj.oss-cn-hangzhou.aliyuncs.com/upload/20230606/798823604526421cb86212937c6c4d62.png",
                  "router":"/pages/index/category",
                  "path_name":"商品列表-数码家电",
              }
            ]
        },
        "decorate_id":1
    },
    {
        "id":54392,
        "type":"adv",
        "category":"home",
        "name":"广告魔方",
        "content":{
            "list":[
                {
                    "imgUrl":"http://file.shopro.top/uploads/20210522/a31e0f90ce8765583c60012ac94f967c.png",
                    "router":"/pages/goods/detail?id=118",
					"path_name":"",
                    "path_type":1
                },
                {
                    "imgUrl":"http://file.shopro.top/uploads/20210518/cddb5d90a4241f6235d16368534bc730.png",
                    "router":"/pages/goods/detail?id=116",
					"path_name":"",
                    "path_type":1
                },
                {
                    "imgUrl":"http://file.shopro.top/uploads/20210518/e047d312fb5930de972ae288b9b3bae7.png",
                    "router":"/pages/goods/detail?id=122",
					"path_name":"",
                    "path_type":1
                }
	 
            ],
            "name":"",
            "style":3
        },
        "decorate_id":1
    },
    {
        "id":54393,
        "type":"coupons",
        "category":"home",
        "name":"优惠券",
        "content":{
            "ids":"35,36",
            "name":"",
            "style":1,
            "bgcolor1":"#EFC480",
            "bgcolor2":"#EFC480",
            "pricecolor":"#4F3A1E",
            "color":"#A8700D"
        },
        "decorate_id":1
    },
    {
        "id":54394,
        "type":"groupon",
        "category":"home",
        "name":"拼团",
        "content":{
            "id":128,
            "name":"特价拼团",
            "style":1,
            "groupon_name":"拼团",
            "team_num":"3"
        },
        "decorate_id":1
    },
    {
        "id":54395,
        "type":"seckill",
        "category":"home",
        "name":"秒杀",
        "content":{
            "id":129,
            "name":"限时秒杀",
            "style":2,
            "seckill_name":"秒杀"
        },
        "decorate_id":1
    },
    {
        "id":54396,
        "type":"title-block",
        "category":"home",
        "name":"标题栏",
        "content":{
            "name":"为你推荐",
            "color":"#000000",
            "image":"https://file.shopro.top/imgs/title2.png"
        },
        "decorate_id":1
    },
    {
        "id":54397,
        "type":"goods-list",
        "category":"home",
        "name":"自定义商品",
        "content":{
            "ids":"34,32,31,8",
            "image":"",
            "name":"",
            "style":2
        },
        "decorate_id":1
    },
],

			// 轮播图
			banner:{},
			// 广告通知
			advertising:{},
			// 菜单宫格
			menuGrid:{},
			// 广告魔方
			active:{},
			// 优惠券
			coupon:{},
			// 拼团
			groupon:{},
			// 秒杀
			flashKilling:{},
			// 推荐商品
			goodsList:{
				prudects:[],
				style : 2,
				activity_type : "groupon"
			},
			detail:{
			  tabs: [
				  { title: '新品速递', subTitle: '' },
				  { title: '特惠活动', subTitle: '' },
				  { title: '口碑推荐', subTitle: '' },
				  { title: '电脑平板', subTitle: '' },
			  ],
			},
			detailList: [],
		};
	},
	computed: {
		...mapGetters(['initShop','hasTemplate','homeTemplate', 'isLogin']),
		// // 头部模块数据
		// // 分类选项卡数据
		// categoryTabsData() {
		// 	if (this.homeTemplate?.length) {
		// 		return this.homeTemplate[this.homeTemplate.length - 1]?.content;
		// 	}
		// }
		
	},
	onPullDownRefresh() {
		this.init()
		.then(res => {
			if(res.code = 200){
				uni.stopPullDownRefresh();
			}
		})
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onShow() {
		let that = this;
		this.enable = true;
		this.isLogin && this.getCartList();
		// 网络变化检测
		uni.onNetworkStatusChange(res => {
			this.isConnected = res.isConnected;
			res.isConnected && this.init();
		});
	},
	onHide() {
		this.enable = false;
	},
	onLoad() {
		this.init()
		console.log('首页地址传参',this.$Route.query)
		if (this.$Route.query.shopProductSid) {
			uni.setStorageSync("shopProductSid", this.$Route.query.shopProductSid);
			console.log("商家id")
		} 
		if (this.$Route.query.promoteId) {
			uni.setStorageSync("promoteId", this.$Route.query.promoteId);
			console.log("推广商Id")
		} 
		if (this.$Route.query.promoteUserId) {
			uni.setStorageSync("promoteUserId", this.$Route.query.promoteUserId);
			console.log("推广员ID")
		} 
		if (this.$Route.query.id) {
			console.log('人脸识别回调')
			uni.request({ 
			  url: this.$API_URL+`/user/app/callbackFaceCertifyQuery/${this.$Route.query.id}`, 
			  method: "GET",
			  data: {}, // 如果有请求体
			  success: (res) => {
			    console.log(" 人脸结果", res.data); 
			  },
			  fail: (err) => {
			    console.error(" 请求失败", err);
			  },
			});
		} 
		
		if (this.$Route.query.oid) {
			console.log('e签宝回调')
			uni.request({ 
			  url: this.$API_URL+`/order/app/app-queryIndividualFace/${this.$Route.query.oid}`, 
			  method: "GET",
			  data: {}, // 如果有请求体
			  success: (res) => {
			    console.log(" 签宝回调", res.data); 
			  },
			  fail: (err) => {
			    console.error(" 请求失败", err);
			  },
			});
		} 
		
		
		
	},
	
	created() {
		this.init()
	},
	methods: {
		...mapActions(['appInit', 'getTemplate', 'getCartList']),
		// 初始化
		init() {
			return new Promise((relose, reject)=>{
				this.isRefresh = false
				this.$http('common.home').then(res => {
					if (res.code === 200) {
						var slideShows = JSON.parse(res.data.slideShows)
						// let detailArr = [];
						// let detailListArr = [];
						// slideShows.data.zone.forEach(item => {
						//   this.getminPriceSplit(item.newProduct);
						//   if(item.title == '新品速递' || item.title == '特惠活动' || item.title == '口碑推荐' || item.title == '电脑平板'){
						// 	item.newProduct.forEach(ite=>{
						// 	  if(ite.sign){
						// 		ite.sign = ite.sign.split('/')
						// 	  }
						// 	})
						// 	let obj = {
						// 	  title: item.title
						// 	}
						// 	detailArr.push(obj);
						// 	detailListArr.push(item.newProduct);
						//   }
						// })
						// let wrapBlockArr = [];
						// detailListArr.forEach(item=>{
						//   let blockNum = Math.ceil(item.length/4);
						//   let blockArr = [];
						//   for(let i=0; i<blockNum; i++){
						// 	let numj=i*4;
						// 	let arr = [];
						// 	for(let j=numj; j<(numj+4); j++){
						// 	  if(item[j]){
						// 		arr.push(item[j])
						// 	  }
						// 	}
						// 	blockArr.push(arr);
						//   }
						//   wrapBlockArr.push(blockArr);
						// })
						// this.detail = {tabs: detailArr},
						console.log(11,slideShows.data.zone )
						this.detailList = slideShows.data.zone   
						console.log(11,this.detailList)
						this.banner = slideShows.data.banner
						this.advertising = slideShows.data.advertising
						this.menuGrid = slideShows.data.nav
						this.active = slideShows.data.active
						// this.coupon = slideShows.data.coupon
						// this.groupon = slideShows.data.groupon
						// this.flashKilling = slideShows.data.flashKilling
						var eventsGoods = JSON.parse(res.data.eventsGoods)
						console.log(1122,this.detailList)
						var index = this.detailList.findIndex(item=>{return item.title == "热销商品 HOT SALE" ||item.title == "热销商品"})
						console.log(123,index)
						this.goodsList.prudects = this.detailList[index].newProduct
						this.isRefresh = true
					}
					relose(res)
				});
			})
			
		},
		  getminPriceSplit(params) {
		    return new Promise((resole, reject) => {
		      let prices = []
		      for (let i = 0; i < params.length; i++) {
		        let num = params[i].price + '';
		        params[i].priceFront = num.split('.')[0]
		        params[i].priceLater = num.split('.')[1]
		      }
		      resole(params)
		    })
		  },
	}
};
</script>

<style lang="scss">
	.home-icon_img{
	  width: 100%;
	}
	
	.my-product {
		    width: 710rpx;
		    
		    margin: 40rpx 20rpx 40rpx;
		    border-radius: 15rpx;
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-between;
		}
		.my-product-item {
		    width: 340rpx;
		    height: 420rpx;
		    padding: 40rpx 30rpx 30rpx;
		    box-sizing: border-box;
		    border-radius: 15rpx;
		    background-color: #fff;
		    margin-bottom: 30rpx;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
		    align-items: center;
		    box-shadow: 0 0 15rpx 10rpx #eee;
		}
	
	.product-img {
	    width: 220rpx;
	    height: 260rpx;
	    /* background-color: #ccc; */
	}
	
	.product-price {
	    color: #F63737;
	}
	.content-title{
	  width: 100%;
	  margin-top: 6px;
	}
	.product-title{
		  overflow:hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		  -o-text-overflow:ellipsis;
	}
	
	.deList_min_tit_img{
	  width: 105rpx;
	  height: 40rpx;
	  display: inline-block;
	  text-align: center;
	  position: relative;
	  border-radius: 7rpx;
	  background-color: #FFECE3;
	  top: -4rpx;
	  left: -4rpx;
	}
	.deList_min_tit_img_text{
	  position: relative;
	  z-index: 1;
	  font-size: 20rpx;
	  font-weight: 400;
	  color: #FF3B30;
	  line-height: 40rpx;
	}
	.deList_min_tit_text{
	  font-size: 25rpx;
	  font-weight: 400;
	  color: #333333;
	  line-height: 40rpx;
	}
	
	/* type */
	.home-type {
		width: 710rpx;
	  background: #FFFFFF;
	  // width: 100%;
	  border-radius: 16rpx;
	  margin: 30rpx auto 30rpx;
	  padding:25rpx 40rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.type {
	  height: 170rpx;
	  float: left;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: center;
	  margin-left: 85rpx;
	}
	.type-img{
	  border-radius: 30rpx;
	  overflow: hidden;
	}
	.type:nth-child(1){
	  margin-left: 0;
	}
	.type:nth-child(5){
	  margin-left: 0;
	}
	.type-title{
	  margin-top: 10rpx;
	  margin-bottom: 30rpx;
	  color: #333333;
	  font-size: 24rpx;
	}
	.type-title_text{
	  /* width: 72rpx; */
	  height: 34rpx;
	  font-size: 24rpx;
	  color: #333333;
	  line-height: 34rpx;
	}
</style>
